<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用程序界面</title>

    <style>

*{
    margin: 0px;
    padding: 0px;
}

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: black;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.container{
    background-color: rgb(0, 0, 0);
    flex-grow: 0;
    flex-shrink: 0;
}

.mainsizing{
    width: 1600px;
    margin: 0px;
    padding: 0px;
}


    </style>
</head>
<body>
    
    <div class="container mainsizing" id="container">
        <iframe class="mainsizing" id="appmain" src="index.html" frameborder="0"></iframe>
    </div>

    <script>
        function doResize(){
            var container = document.getElementById("container");
            var targetW=1600;
            var currentW = document.body.clientWidth;
            var currentH = document.body.clientHeight;
            var targetH = targetW * currentH / currentW;
            var scaleFactor=1;
            if(currentW * targetH / targetW < currentH){
                scalefactor = currentW * 1.0 / targetW;
            }
            else{
                scalefactor = currentH * 1.0 / targetH;
            }

            container.style.transform="scale("+scalefactor+","+scalefactor+")";
            container.style.height=targetH+"px";
            document.getElementById("appmain").style.height=targetH+"px";
        }

        document.body.onresize=function(dom,e){
            doResize();
        }

        document.body.onload=function(dom,e){
            doResize();
        }

        function reloadBackgroundImage(){
            document.getElementById("appmain").contentWindow.reloadBackgroundImage();

        }

        function setUserName(username){
            document.getElementById("appmain").contentWindow._username=username;
        }

    </script>

</body>
</html>